<template>
  <div class="obsres">
    <dnav :data="['数据分析', '检测结果']" />

    <!-- 选择检测任务 -->
    <div class="nav">
      <div>
        <el-select v-model="ass_id" placeholder="请选择" @change="sel">
          <el-option
            v-for="item in obsasslist"
            :key="item.ass_id"
            :label="item.aname"
            :value="item.ass_id"
          >
            <span style="float: left">{{ item.aname }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{
              item.over_time
            }}</span>
          </el-option>
        </el-select>
      </div>
      <div>
        <download-excel
          v-if="ass_id"
          class="export-excel-wrapper"
          :data="exdata"
          :fields="json_fields"
          :name="aname + '检测结果.xls'"
        >
          <el-button size="mini" type="success">导出</el-button>
        </download-excel>
      </div>
    </div>

    <!-- 检测结果展示 -->
    <el-divider content-position="left">检测结果</el-divider>
    <el-card v-if="ass_id">
      <h3 class="h3">检测结果</h3>
      <el-table :data="obsreslist" style="width: 100%">
        <el-table-column prop="wuname" label="检测对象" width="180">
        </el-table-column>
        <el-table-column prop="rname" label="科室" width="180">
        </el-table-column
        ><el-table-column prop="obs_num" label="样品数" width="180">
        </el-table-column
        ><el-table-column prop="hg_num" label="合格数" width="180">
        </el-table-column
        ><el-table-column label="合格率" width="180">
          <template slot-scope="prop">
            {{ prop.row | hgl }}
          </template>
        </el-table-column>
        <el-table-column label="查看结果">
          <template slot-scope="prop">
            <el-button
              size="mini"
              :type="wuname == prop.row.wuname ? 'primary' : ''"
              @click="selres(prop.row)"
              >查看附表</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 查看附表 -->
    <el-card>
      <h3 class="h3">附表-{{ wuname }}</h3>
      <el-table :data="objreslist" style="width: 100%" :border="true">
        <el-table-column prop="mir_id" label="样品编号" width="180">
        </el-table-column>
        <el-table-column prop="miname" label="检测对象" width="180">
        </el-table-column>
        <el-table-column prop="mires" label="检测值" width="180">
        </el-table-column>
        <el-table-column prop="hgres" label="检测标准"> </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ass_id: "", //任务id
      aname: "", //任务名称
      obsasslist: [], //检测任务列表
      obsreslist: [], //检测结果列表
      wuname: "", //当前检测对象结果
      objreslist: [], //附表展示列表
      exdata: [], //导出表格数据
      json_fields: {
        检测对象: "wuname",
        科室: "rname",
        样品数: "obs_num",
        合格数: "hg_num",
        合格率: "hgl",
        完成时间: {
          field: "add_time",
          callback: (value) => {
            //将数字处理成字符串，避免导出excel之后数据转化为科学计数法
            return "&nbsp;" + value;
          },
        },
      },
    };
  },
  filters: {
    hgl(row) {
      // 计算合格率
      return (row.hg_num / row.obs_num).toFixed(2) * 100 + "%";
    },
  },
  methods: {
    async getobsass() {
      //获取检测任务
      let res = await this.$api.Obsass();
      if (res.data.code == 200) {
        console.log(res);
        this.obsasslist = res.data.data;
      }
    },
    async sel() {
      //获取检测结果
      let res = await this.$api.Obsres({ ass_id: this.ass_id });
      if (res.data.code == 200) {
        this.aname = this.obsasslist.find((v) => v.ass_id == this.ass_id).aname; // 当前任务名称
        this.obsreslist = res.data.data;
        this.wuname = this.obsreslist[0].wuname;
        this.objreslist = this.obsreslist[0].children;
        this.createxls(this.obsreslist);
      }
    },
    selres(v) {
      // 查看附表结果
      // console.log(this.obsreslist);
      this.wuname = v.wuname;
      this.objreslist = v.children;
      // console.log(this);
      this.createxls(this.obsreslist);
    },
    createxls(data) {
      //创建表格数据
      this.exdata = data.map((v, k) => {
        let obj = {
          wuname: v.wuname,
          rname: v.rname,
          hg_num: v.hg_num,
          obs_num: v.obs_num,
          hgl: (v.hg_num / v.obs_num).toFixed(2) * 100 + "%",
          add_time: v.add_time,
        };
        return obj;
      });
      console.log(this.exdata);
    },
  },
  mounted() {
    this.getobsass();
    // this.sel();
  },
};
</script>

<style>
.h3 {
  height: 30px;
  background: gainsboro;
  border-left: 5px solid #409eff;
  line-height: 30px;
  padding-left: 10px;
}
.nav {
  display: flex;
  justify-content: space-between;
}
</style>